<template>
  <div class="setting">
    <div class="setting-title">基础设置</div>
    <div class="setting-content">
      <div class="setting-content-module">
        <div class="setting-content-module-title">周期设置</div>
        <div class="setting-content-module-one">
          <div class="setting-content-module-one-content">
            <div class="setting-content-module-one-content-div">
              <div class="setting-content-module-one-content-div-title">
                OKR周期长度
              </div>
              <div>{{ data.okr_lenth }}个月</div>
            </div>
            <!-- <div class="setting-content-module-one-content-div">
              <div class="setting-content-module-one-content-div-title">
                OKR开始周期
              </div>
              <div>{{data.okr_str_year}}-{{data.okr_end_year}}</div>
            </div> -->
            <div class="setting-content-module-one-content-div">
              <div class="setting-content-module-one-content-div-title">
                年度OKR跨度
              </div>
              <div>
                开始于{{ Number(data.okr_str_year) }}月 ~ 结束于{{
                  Number(data.okr_str_year) > Number(data.okr_end_year)
                    ? "下年度"
                    : ""
                }}{{ Number(data.okr_end_year) }}月
              </div>
            </div>
          </div>
          <div class="setting-content-module-one-edit">
            <el-button
              type="text"
              icon="el-icon-edit"
              @click="dialogVisible = true"
              >编辑</el-button
            >
          </div>
        </div>
      </div>

      <div class="setting-content-module">
        <div class="setting-content-module-title">周期阶段设置</div>
        <div class="setting-content-module-one">
          <div class="setting-content-module-one-content">
            <div class="setting-content-module-one-content-div">
              <div class="setting-content-module-one-content-div-title">
                OKR阶段设置
              </div>
              <div>
                <div>制定阶段：截止于周期开始后{{data.okr_period_end_time}}天</div>
                <div>跟进阶段：周期的设置时间范围</div>
                <div>复盘阶段：开始于周期结束后{{data.okr_period_time_review}}天内</div>
              </div>
            </div>
            <div class="setting-content-module-one-content-div">
              <div class="setting-content-module-one-content-div-title">
                年度OKR阶段设置
              </div>
              <div>
                <div>制定阶段：截止于周期开始后{{data.okr_period_end_time_year}}天</div>
                <div>跟进阶段：周期的设置时间</div>
                <div>复盘阶段：开始于周期结束后{{data.okr_period_time_review_year}}天内</div>
              </div>
            </div>
          </div>
          <div class="setting-content-module-one-edit">
            <el-button
              type="text"
              icon="el-icon-edit"
              @click="dialogVisibleTwo = true"
              >编辑</el-button
            >
          </div>
        </div>
      </div>

      <div class="setting-content-module">
        <div class="setting-content-module-title">OKR状态设置</div>
        <div class="setting-content-module-one">
          <div class="setting-content-module-one-content">
            <div
              class="setting-content-module-one-content-div"
              v-for="(item, index) in color_json"
              :key="index"
            >
              <div class="setting-content-module-one-content-div-title">
                状态{{ index + 1 }}
              </div>
              <div
                class="setting-content-module-one-content-div-status"
                :style="{ background: item.color }"
              >
                {{ item.name }}
              </div>
            </div>
          </div>
          <div class="setting-content-module-one-edit">
            <el-button
              type="text"
              icon="el-icon-edit"
              @click="dialogVisibleThree = true"
              >编辑</el-button
            >
          </div>
        </div>
      </div>

      <div class="setting-content-module">
        <div class="setting-content-module-title">OKR评级设置</div>
        <div class="setting-content-module-one">
          <div class="setting-content-module-one-content">
            <div
              class="setting-content-module-one-content-div"
              v-for="(item, index) in set_json"
              :key="index"
            >
              <div class="setting-content-module-one-content-div-title">
                评级{{ index + 1 }}
              </div>
              <div
                class="setting-content-module-one-content-div-status"
                :style="{ background: item.color }"
              >
                {{ item.name }}
              </div>
            </div>
          </div>
          <div class="setting-content-module-one-edit">
            <el-button
              type="text"
              icon="el-icon-edit"
              @click="dialogVisibleFour = true"
              >编辑</el-button
            >
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="周期设置" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
        label-position="top"
      >
        <el-form-item label="年度OKR跨度">
          <div style="margin-left: 10px">
            开始于
            <el-date-picker
              v-model="data.okr_str_year"
              type="month"
              format="M 月"
              value-format="MM"
              placeholder="选择月"
            >
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="周期长度" required>
          <div style="margin-left: 10px">{{ ruleForm.okr_lenth }}个月</div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="getHomeWarehouseReservationList">取 消</el-button>
        <el-button type="primary" @click="submitForm()">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="周期阶段设置"
      :visible.sync="dialogVisibleTwo"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        :model="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
        label-position="top"
      >
        <el-form-item label="OKR阶段设置">
          <div class="zq">
            <el-steps direction="vertical" :active="3">
              <el-step>
                <div slot="title" class="zq-title">制定阶段</div>
                <div slot="description" class="zq-input">
                  截止于周期开始后
                  <el-input
                    v-model="data.okr_period_end_time"
                    placeholder="天数"
                    size="normal"
                  ></el-input>
                  天
                </div>
              </el-step>
              <el-step>
                <div slot="title" class="zq-title">跟进阶段</div>
                <div slot="description" class="zq-input">
                  周期设置的时间范围
                </div>
              </el-step>
              <el-step>
                <div slot="title" class="zq-title">复盘阶段</div>
                <div slot="description" class="zq-input">
                  截止于周期结束后
                  <el-input
                    v-model="data.okr_period_time_review"
                    placeholder="天数"
                    size="normal"
                  ></el-input>
                  天内
                </div>
              </el-step>
            </el-steps>
          </div>
        </el-form-item>
        <el-form-item label="年度OKR阶段设置">
          <div class="zq">
            <el-steps direction="vertical" :active="3">
              <el-step>
                <div slot="title" class="zq-title">制定阶段</div>
                <div slot="description" class="zq-input">
                  截止于周期开始后
                  <el-input
                    v-model="data.okr_period_end_time_year"
                    placeholder="天数"
                    size="normal"
                  ></el-input>
                  天
                </div>
              </el-step>
              <el-step>
                <div slot="title" class="zq-title">跟进阶段</div>
                <div slot="description" class="zq-input">
                  周期设置的时间范围
                </div>
              </el-step>
              <el-step>
                <div slot="title" class="zq-title">复盘阶段</div>
                <div slot="description" class="zq-input">
                  截止于周期结束后
                  <el-input
                    v-model="data.okr_period_time_review_year"
                    placeholder="天数"
                    size="normal"
                  ></el-input>
                  天内
                </div>
              </el-step>
            </el-steps>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="getHomeWarehouseReservationList">取 消</el-button>
        <el-button type="primary" @click="onSetting()">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="OKR状态设置"
      :visible.sync="dialogVisibleThree"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
        label-position="top"
      >
        <el-form-item label="OKR状态">
          <div class="status" v-for="(item, index) in color_json" :key="index">
            <div>状态{{ index + 1 }}</div>
            <div>
              <div>
                <div>名称</div>
                <el-input
                  v-model="item.name"
                  placeholder="请输入状态名称"
                  size="normal"
                  clearable
                ></el-input>
              </div>
              <div>
                <div>颜色</div>
                <el-color-picker v-model="item.color"></el-color-picker>
              </div>
              <div>
                <div>排序</div>
                <el-input
                  v-model="item.order"
                  placeholder="请输入序号(大数靠前)"
                  size="normal"
                  clearable
                ></el-input>
              </div>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="getHomeWarehouseReservationList">取 消</el-button>
        <el-button type="primary" @click="onColor">保 存</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="OKR评级设置"
      :visible.sync="dialogVisibleFour"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
        label-position="top"
      >
        <el-form-item label="OKR评级">
          <div class="status" v-for="(item, index) in set_json" :key="index">
            <div>评级{{ index + 1 }}</div>
            <div>
              <div>
                <div>名称</div>
                <el-input
                  v-model="item.name"
                  placeholder="请输入状态名称"
                  size="normal"
                  clearable
                ></el-input>
              </div>
              <div>
                <div>颜色</div>
                <el-color-picker v-model="item.color"></el-color-picker>
              </div>
              <div>
                <div>排序</div>
                <el-input
                  v-model="item.order"
                  placeholder="请输入序号(大数靠前)"
                  size="normal"
                  clearable
                ></el-input>
              </div>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="getHomeWarehouseReservationList">取 消</el-button>
        <el-button type="primary" @click="onSet">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  postHomeWarehouseReservationText,
  getHomeWarehouseReservationList,
} from "@/api";
import { getStore } from "@/utils/localStorage.js";
import { json } from "body-parser";
export default {
  data() {
    return {
      dialogVisible: false,
      dialogVisibleTwo: false,
      dialogVisibleThree: false,
      dialogVisibleFour: false,
      ruleForm: {
        admin_id: "",
        okr_str_year: "",
        okr_lenth: 3,
      },
      data: "",
      color_json: [
        {
          name: "正常",
          color: "#2B71D6",
          order: "3",
        },
        {
          name: "风险",
          color: "#FFAF00",
          order: "2",
        },
        {
          name: "延期",
          color: "#FF6D58",
          order: "1",
        },
      ],
      set_json: [
        {
          name: "A+",
          color: "#2B71D6",
          order: "4",
        },
        {
          name: "A",
          color: "#2FBD02",
          order: "3",
        },
        {
          name: "B+",
          color: "#FFAF00",
          order: "2",
        },
        {
          name: "B",
          color: "#FF6D58",
          order: "1",
        },
        {
          name: "B-",
          color: "#FF6D58",
          order: "1",
        },
        {
          name: "C",
          color: "#FF6D58",
          order: "1",
        },
        {
          name: "D",
          color: "#FF6D58",
          order: "1",
        }
      ],
    };
  },
  mounted() {
    this.ruleForm.admin_id = getStore("userinfo").id;
    this.getHomeWarehouseReservationList();
  },
  methods: {
    async submitForm() {
      let { ruleForm, data } = this;
      let okr_str_year = data.okr_str_year
      if (okr_str_year) {
        let length = Number(data.okr_lenth);
        let obj = {
          type: 1,
          admin_id: ruleForm.admin_id,
          okr_str_year,
          okr_lenth: length,
        };
        let num = Number(okr_str_year);
        let maxlength = 12 / length;
        let okr_effective_cycle = "";
        for (let index = 0; index < maxlength; index++) {
          if (index == 0) {
            let time = num + "-" + (num + 2) + ",";
            okr_effective_cycle += time;
          } else {
            let start = num + index * 3;
            if (start > 12) {
              start -= 12;
            }
            let end = start + 2;
            if (end > 12) {
              end -= 12;
            }
            let time = start + "-" + end;
            if (index != maxlength - 1) {
              time += ",";
            }
            okr_effective_cycle += time;
          }
        }
        obj.okr_effective_cycle = okr_effective_cycle;
        await postHomeWarehouseReservationText(obj);
        await this.getHomeWarehouseReservationList();
      } else {
        this.$message.warning("月份不能为空");
      }
    },
    handleClose(){
        this.getHomeWarehouseReservationList()
    },
    async getHomeWarehouseReservationList() {
      this.dialogVisible = false;
      this.dialogVisibleTwo = false;
      this.dialogVisibleThree = false;
      this.dialogVisibleFour = false;
      let res = await getHomeWarehouseReservationList();
      console.log("okr展示", res);
      let data = res.data;
      if (data.color && data.color.length) {
        this.color_json = data.color;
      }
      if (data.set && data.set.length) {
        this.set_json = data.set;
      }
      if (!data.okr_lenth) {
        data.okr_lenth = 3;
      }
      this.data = data;
    },
    async onSetting() {
      let { data,ruleForm } = this;
      let obj = {
        type: 2,
        admin_id: ruleForm.admin_id,
        okr_period_end_time:data.okr_period_end_time,
        okr_period_end_time_year:data.okr_period_end_time_year,
        okr_period_time_review:data.okr_period_time_review,
        okr_period_time_review_year:data.okr_period_time_review_year
      };
      await postHomeWarehouseReservationText(obj);
      await this.getHomeWarehouseReservationList();
    },
    async onColor() {
      let { ruleForm, color_json } = this;
      let obj = {
        type: 3,
        admin_id: ruleForm.admin_id,
        color_json:JSON.stringify(color_json),
      };
      await postHomeWarehouseReservationText(obj);
      await this.getHomeWarehouseReservationList();
    },
    async onSet() {
      let { ruleForm, set_json } = this;
      let obj = {
        type: 4,
        admin_id: ruleForm.admin_id,
        set_json: JSON.stringify(set_json),
      };
      await postHomeWarehouseReservationText(obj);
      await this.getHomeWarehouseReservationList();
    },
  },
};
</script>

<style lang="scss" scoped>
.status {
  background: #f6f6f6;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 10px;
  > div:nth-child(1) {
    font-weight: 800;
  }
  > div:nth-child(2) {
    display: flex;
    flex-wrap: wrap;
    > div {
      display: flex;
      align-items: center;
      width: 50%;
      margin-bottom: 10px;
      > div {
        width: 40px;
      }
      > .el-input {
        width: 80%;
      }
    }
  }
}
.zq {
  background: #f6f6f6;
  height: 260px;
  padding: 20px;
  border-radius: 8px;
  /deep/ .el-form-item__content {
    line-height: normal;
  }
  .zq-title {
    color: #8f959e;
    font-size: 14px;
  }
  .zq-input {
    color: #333333;
    font-size: 16px;
    > .el-input {
      width: 64px;
    }
  }
}
.setting {
  .setting-title {
    font-size: 20px;
    font-weight: 800;
  }
  .setting-content {
    margin-top: 20px;
    background: #ffffff;
    border-radius: 8px;
    padding: 20px;
    .setting-content-module {
      .setting-content-module-title {
        font-size: 18px;
        font-weight: 800;
        border-bottom: 1px solid #cfd3d6;
        padding: 20px 0;
      }
      .setting-content-module-one {
        display: flex;
        justify-content: space-between;
        padding-bottom: 60px;
        padding-top: 10px;
        .setting-content-module-one-content {
          display: flex;
          justify-content: space-between;
          .setting-content-module-one-content-div {
            width: 300px;
            .setting-content-module-one-content-div-title {
              color: #8f959e;
              font-size: 14px;
              padding: 10px 0;
            }
            .setting-content-module-one-content-div-status {
              display: inline-block;
              padding: 5px 10px;
              border-radius: 4px;
              font-size: 14px;
              color:#ffffff
            }
          }
        }
        .setting-content-module-one-edit {
          > .el-button {
            font-size: 16px;
            font-weight: 800;
            /deep/ i {
              font-size: 16px;
              font-weight: 800;
            }
          }
        }
      }
    }
  }
}
</style>